const path = require('path');
const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const DefinePlugin = require('webpack/lib/DefinePlugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const { AutoWebPlugin } = require('web-webpack-plugin');

// 自动寻找 pages 目录下的所有目录，把每一个目录看成一个单页应用
const autoWebPlugin = new AutoWebPlugin('pages', {
    template: './template.html', // HTML 模版文件所在的文件路径
    postEntrys: ['./common.css'],// 所有页面都依赖这份通用的 CSS 样式文件
    // 提取出所有页面公共的代码
    commonsChunk: {
      name: 'common',// 提取出公共代码 Chunk 的名称
    },
  });

module.exports = {
    // 执行入口文件
    // autoWebPlugin.entry 方法可以获取到所有由 autoWebPlugin 生成的入口配置
    entry: autoWebPlugin.entry({
        // 这里可以加入你额外需要的 Chunk 入口
    }),
    target: 'electron-renderer',
    output: {
        filename: '[name]_[chunkhash:8].js',// 给输出的文件名称加上 hash 值
        path: path.resolve(__dirname, './dist')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: ['babel-loader'],
                // 该目录下的文件都是采用的 ES5 语法，没必要再通过 Babel 去转换
                exclude: path.resolve(__dirname, 'node_modules'),
            },
            {
                test: /\.css/,// 增加对 CSS 文件的支持
                // 提取出 Chunk 中的 CSS 代码到单独的文件中
                use: ExtractTextPlugin.extract({
                    use: ['css-loader?minimize'] // 压缩 CSS 代码
                }),
            }
        ]
    },
    plugins: [
        autoWebPlugin,
        new ExtractTextPlugin({
            filename: `[name]_[contenthash:8].css`,// 给输出的 CSS 文件名称加上 Hash 值
        }),
        new DefinePlugin({
            // 定义 NODE_ENV 环境变量为 production，以去除源码中只有开发时才需要的部分
            'process.env': {
                NODE_ENV: JSON.stringify('production')
            }
        }),
        // 压缩输出的 JS 代码
        // new UglifyJsPlugin({
        //   // 最紧凑的输出
        //   beautify: false,
        //   // 删除所有的注释
        //   comments: false,
        //   compress: {
        //     // 在UglifyJs删除没有用到的代码时不输出警告
        //     warnings: false,
        //     // 删除所有的 `console` 语句，可以兼容ie浏览器
        //     drop_console: true,
        //     // 内嵌定义了但是只用到一次的变量
        //     collapse_vars: true,
        //     // 提取出出现多次但是没有定义成变量去引用的静态值
        //     reduce_vars: true,
        //   } 
        // }),
        //发布时自动清空目录
        new CleanWebpackPlugin(['dist']),
    ],
    watch: true,
    devtool: 'source-map'
}